<script>
export default {
  data () {
    return {
      valueLeft: [
        { id: 1, number: 50, TypeName: '流行景点' },
        { id: 2, number: 50, TypeName: '游玩场所' },
        { id: 3, number: 50, TypeName: '科教文化' },
        { id: 4, number: 50, TypeName: '红色景区' },
        { id: 5, number: 50, TypeName: '购物服务' },
        { id: 6, number: 50, TypeName: '餐饮服务' },
        { id: 7, number: 50, TypeName: '体育休闲' },
        { id: 8, number: 50, TypeName: '寺庙道观' }
      ],
      valueRight: [
        { id: 1, number: 50 },
        { id: 2, number: 50 },
        { id: 3, number: 50 },
        { id: 4, number: 50 },
        { id: 5, number: 50 },
        { id: 6, number: 50 },
        { id: 7, number: 50 },
        { id: 8, number: 50 }
      ],
      update: false
    }
  },
  props: {
    values: []
  }
}
</script>
<template>
  <div class="contentLeft">
    <h2>个人画像</h2>
    <span class="renew" v-if="!update" @click="update = !update">更新</span>
    <span class="renew" v-else @click="update = !update">完成</span>
    <div class="partition"></div>
    <div class="portraitLeftOut">
      <div class="portraitLeft" v-for="item in valueLeft" :key="item.id">
        <span class="demonstration">{{ item.TypeName }}</span>
        <el-slider v-if="update" v-model="item.number"></el-slider>
        <el-slider v-else v-model="item.number" disabled></el-slider>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.contentLeft {
  height: 100%;
  padding: 20px;
  h2 {
    display: inline-block;
  }
  .renew {
    float: right;
    color: black;
    font-size: 15px;
    cursor: pointer;
  }
  .partition {
    background-color: black;
    height: 1px;
    width: 100%;
  }
  .portraitLeftOut {
    padding: 30px;
    .portraitLeft {
      height: 10%;
      width: 90%;
      margin: 0 auto;
      font-family: cool;
      font-size: 22px;
    }
  }
}
</style>
